<template>
  <div class="app-container">
    <el-card>
      <Header class="header">
        <template #left>
          <el-button type="primary" size="small" @click="getisShowDialog(-1)">添加分类</el-button>
        </template>
        <template #right>
          <el-input v-model="pageConfig.title_contains" placeholder="请输入关键字" @change="searchfn">
            <el-button slot="append" icon="el-icon-search" @click="searchfn" />
          </el-input>
        </template>
      </Header>

      <hr>
      <!-- 表单 -->
      <transition name="fade-transform" mode="out-in">
        <el-table
          v-show="isshow"
          :data="classificationlist"
          border
          style="width: 100%"
        >
          <el-table-column
            prop=""
            label="图片"
            width="180"
          >
            <template #default="{row}">
              <img class="imgBig" :src="row.image" alt="" width="120px">
            </template>
          </el-table-column>
          <el-table-column
            prop="title"
            label="标题"
            width="180"
          />
          <el-table-column
            prop="desc"
            label="介绍"
          />
          <el-table-column
            label="操作"
            width="300"
          >
            <template #default="{row}">
              <el-button type="primary" size="small" @click="getisShowDialog(row.id)"> 编辑 </el-button>
              <el-button type="danger" size="small" @click="delCategoties(row.id)"> 删除 </el-button>
            </template>
          </el-table-column>
        </el-table>
      </transition>
      <!-- 分页 -->
      <el-row type="flex" justify="center">
        <el-pagination
          layout="prev, pager, next"
          :page-size="pageConfig._limit"
          :current-page="currentPage"
          :total="total"
          @current-change="currentChange"
        />
      </el-row>
    </el-card>
    <!-- 对话框-编辑或添加 -->
    <Dialog ref="dialog" :is-show-dialog.sync="isShowDialog" @init="getCategoriesInit" @addinit="addinit" />
  </div>
</template>

<script>
import Dialog from './components/dialog.vue'
import { getCategories, numCategoties, delCategoties } from '@/api/classification'
import Header from '@/components/header/index.vue'
export default {
  components: {
    Header, Dialog
  },
  data() {
    return {
      isshow: true,
      currentPage: 1,
      isShowDialog: false,
      total: 0,
      classificationlist: [],
      pageConfig: {
        _limit: 2,
        _start: 0,
        title_contains: ''
      }
    }
  },

  async created() {
    this.getCategoriesInit()
  },
  methods: {
    // 添加
    async addinit() {
      // 跳转到最新页
      await this.getCategoriesInit()
      this.$nextTick(() => {
        this.currentPage = Math.ceil(this.total / this.pageConfig._limit)
        this.pageConfig._start = (this.currentPage - 1) * this.pageConfig._limit
      })

      await this.getCategoriesInit()
    },
    // 搜索
    async searchfn() {
      this.pageConfig._start = 0
      this.currentPage = 1
      await this.getCategoriesInit()
      const { data } = await numCategoties(this.pageConfig)
      this.$nextTick(() => {
        this.total = data
      })
      const isTrue = this.pageConfig.title_contains === ''
      if (!isTrue) {
        console.log(1)
        this.total = this.classificationlist.length
      }
    },
    // 渲染界面
    async getCategoriesInit() {
      const { data } = await getCategories(this.pageConfig)
      this.classificationlist = data
      const obj = await numCategoties(this.pageConfig)
      this.total = obj.data
    },
    //
    async currentChange(newPage) {
      // console.log(newPage)
      this.isshow = false
      setTimeout(() => {
        this.isshow = true
      }, 100)
      this.currentPage = newPage

      this.pageConfig._start = (this.currentPage - 1) * this.pageConfig._limit
      await this.getCategoriesInit()
    },
    // 点击编辑或添加时
    async getisShowDialog(id) {
      if (id > 0) {
        this.$refs.dialog.getFromData(id)
      }
      this.isShowDialog = true
    },
    async delCategoties(id) {
      await this.$confirm('是否删除')
      await delCategoties(id)
      await this.$message.success('删除成功')
      await this.getCategoriesInit()
      if (this.classificationlist.length < 1) {
        this.currentPage--
        await this.currentChange(this.currentPage)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.imgBig{
  width: 150px;
  height: 150px;
}
hr {
    border: none;
    height: 1px;
    background-color: #e5e5e5;
    margin-bottom: 25px;
    margin-top: 30px;
  }

 /* fade-transform */
.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all 0.1s;
}

.fade-transform-enter {
  opacity: 0;
  transform: translateX(-80px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(50px);
}
</style>
